<script setup>
	import { onMounted, ref } from 'vue'
	import { useActivityProStore } from '@/store/activityPro'
	import { useUserStore } from '@/store/userInfo'
	// 轻提示方法
	const showToast = (title, type = 'none') => {
		setTimeout(() => {
			uni.showToast({
				title,
				icon: type,
				duration: 2000,
				mask: true
			})
		}, 800)
	}
	// 商品云对象
	const productApi = uniCloud.importObject( 'product', { customUI: true } )
	// 活动商品列表
	const activityProStore = useActivityProStore( )
	// 所有商品列表
	const allProductList = ref( [ ] )
	// 用户商店
	const userStore = useUserStore( )
	// 弹窗引用
	const popup = ref( null )
	// 当前选择的tab
	const currentTab = ref( 'activity' ) // 'activity' 或 'all'

	// 获取所有商品
	const getAllProducts = async ( ) => {
		const res = await productApi.getList( )
		if ( res.errCode === 0 ) {
			// 过滤掉已经是活动商品的商品
			allProductList.value = res.data.filter( item => {
				return item.is_hd !== true
			} )
			console.log( '非活动商品', allProductList.value )
		} else {
			showToast('获取商品列表失败')
		}
	}
	// 添加商品
	const handleAdd = async ( item ) => {
		const result = await productApi.updateIshd( item._id, true, userStore.userInfo.role )
		if ( result.errCode === 0 ) {
			showToast('添加成功', 'success')
			activityProStore.setActivityList( result.data )
			await getAllProducts( )
		} else {
			showToast(result.errMsg || '添加失败')
		}
	}
	// 删除活动商品
	const handleRemove = async ( id ) => {
		const res = await uni.showModal( {
			title: '提示',
			content: '确定要将该商品移出活动吗？',
			confirmColor: '#ff4d4f'
		} )

		if ( !res.confirm ) return

		const result = await productApi.updateIshd( id, false, userStore.userInfo.role )
		if ( result.errCode === 0 ) {
			showToast('移除成功', 'success')
			activityProStore.removeActivityPro( id )
			await getAllProducts( )
		} else {
			showToast(result.errMsg || '移除失败')
		}
	}

	// 监听tab切换
	const handleTabChange = ( e ) => {
		console.log( e )
		currentTab.value = e
		console.log( '活动商品', activityProStore.activityList )
		if ( e === 'all' ) {
			getAllProducts( )
		}
	}

	onMounted( ( ) => {
		getAllProducts( ) // 初始化时加载所有商品列表
	} )
</script>

<template>
	<view class="activity-pro">
		<!-- 顶部切换 -->
		<view class="tabs">
			<view class="tab-item" :class="{ active: currentTab === 'activity' }"
				@tap="handleTabChange('activity')">
				活动商品
			</view>
			<view class="tab-item" :class="{ active: currentTab === 'all' }"
				@tap="handleTabChange('all')">
				全部商品
			</view>
		</view>

		<!-- 活动商品列表 -->
		<template v-if="currentTab === 'activity'">
			<up-empty v-if="!activityProStore.activityList.length" marginTop="100" mode="car"
				icon="https://mp-25cc8794-9056-4536-a51b-6c5ab0bc5bd9.cdn.bspapp.com/emptyCart_no.png"
				text="暂无活动商品">
			</up-empty>
			<view v-else class="list">
				<view class="item" v-for="item in activityProStore.activityList" :key="item._id">
					<view class="product-info">
						<view class="top-row">
							<image class="cover" :src="item.cover_pic" mode="aspectFill" />
							<view class="info">
								<view class="name">{{ item.name }}</view>
							</view>
						</view>
						<view class="bottom-row">
							<view class="price">
								<text class="buy-price">¥{{ item.buy_price }}</text>
								<text class="original-price">¥{{ item.original_price }}</text>
							</view>
							<view class="actions">
								<button class="btn delete" @tap="handleRemove(item._id)">移出活动</button>
							</view>
						</view>
					</view>
				</view>
			</view>
		</template>

		<!-- 全部商品列表 -->
		<template v-if="currentTab === 'all'">
			<up-empty v-if="!allProductList.length" marginTop="100" mode="car"
				icon="https://mp-25cc8794-9056-4536-a51b-6c5ab0bc5bd9.cdn.bspapp.com/emptyCart_no.png"
				text="暂无可添加商品">
			</up-empty>
			<view v-else class="list">
				<view class="item" v-for="item in allProductList" :key="item._id">
					<view class="product-info">
						<view class="top-row">
							<image class="cover" :src="item.cover_pic" mode="aspectFill" />
							<view class="info">
								<view class="name">{{ item.name }}</view>
							</view>
						</view>
						<view class="bottom-row">
							<view class="price">
								<text class="buy-price">¥{{ item.buy_price }}</text>
								<text class="original-price">¥{{ item.original_price }}</text>
							</view>
							<view class="actions">
								<button class="btn add" @tap="handleAdd(item)">添加到活动</button>
							</view>
						</view>
					</view>
				</view>
			</view>
		</template>

		<!-- 底部安全区域占位 -->
		<view class="safe-area"></view>
	</view>
</template>

<style lang="scss" scoped>
	.activity-pro {
		min-height: 100vh;
		padding: 24rpx;
		padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
		background-color: $page-bg-color;

		.tabs {
			display: flex;
			background-color: #fff;
			border-radius: 16rpx;
			margin-bottom: 24rpx;
			padding: 12rpx;

			.tab-item {
				flex: 1;
				text-align: center;
				padding: 16rpx 0;
				font-size: 28rpx;
				color: $text-font-color-2;
				border-radius: 8rpx;

				&.active {
					color: #fff;
					background-color: $brand-theme-color;
				}
			}
		}

		.list {
			.item {
				margin-bottom: 24rpx;
				padding: 24rpx;
				background-color: #fff;
				border-radius: 16rpx;

				.product-info {
					display: flex;
					flex-direction: column;

					.top-row {
						display: flex;
						margin-bottom: 24rpx;

						.cover {
							width: 160rpx;
							height: 160rpx;
							border-radius: 8rpx;
							margin-right: 24rpx;
						}

						.info {
							flex: 1;

							.name {
								font-size: 28rpx;
								color: $text-font-color-1;
								font-weight: 600;
							}
						}
					}

					.bottom-row {
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding-top: 24rpx;
						border-top: 2rpx solid $line-color-aux;

						.price {
							.buy-price {
								font-size: 28rpx;
								color: $brand-ts-color;
								margin-right: 16rpx;
							}

							.original-price {
								font-size: 22rpx;
								color: $text-font-color-3;
								text-decoration: line-through;
							}
						}

						.actions {
							.btn {
								padding: 8rpx 24rpx;
								border-radius: 8rpx;
								font-size: 22rpx;
								line-height: 1.5;
								background-color: transparent;

								&::after {
									border: none;
								}

								&.add {
									color: $brand-theme-color;
									border: 2rpx solid $brand-theme-color;
								}

								&.delete {
									color: #ff4d4f;
									border: 2rpx solid #ff4d4f;
								}

								&:active {
									opacity: 0.8;
								}
							}
						}
					}
				}
			}
		}

		.safe-area {
			height: 120rpx;
			width: 100%;
		}
	}
</style>